@import "../../styles/mixins.scss";
@import "../../styles/animation.scss";
@import "../../styles/extends.scss";

.dark {
  @extend %container-dark;

  h2 {
    @extend %title-dark;
    @extend %section-title-dark;
  }
}

.light {
  @extend %container-light;

  h2 {
    @extend %title-light;
    @extend %section-title-light;
  }
}

.dark, .light {
  @apply gap-12;

  .title {
    @include shadow();
    @apply w-11/12;
  }

  .about {
    @apply h-max
    w-full
    max-w-screen-2xl
    relative
    flex
    flex-col
    justify-center
    items-center
    gap-6
    mb-12;

    p {
      @apply w-5/6
      min-w-96
      text-xl
      xl:text-2xl
      font-normal
      text-start
      cursor-default
      indent-10;

      span {
        @apply 
        text-myTheme-accent;
      }
    }
  }
}
